import * as motion from 'motion/react-client'

/*
* initial 初始化动画样式
* animate 动画最终样式
* transition 动画过渡设置
*
* */
export function MotionFc() {
    return (
        <div className={'h-screen bg-black p-20'}>
            <motion.div className={'size-36 bg-rose-500'}
                        initial={{opacity:0,x:0,filter:'blur(8px)'}}
                        animate={{
                            opacity:[.2,.5,1],
                            x:[20,50,100],
                            filter:'blur(0px)',
                            backgroundColor: ['#fff','#0000f5','#58a65c']
                        }}
                        transition={{duration:3,repeat:1,repeatType:'mirror'}}
            >

            </motion.div>
        </div>
    )
}
